<template>
  <div>
    <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
    <a-modal v-model:open="open" title="Sign up" @ok="handleOk">
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item
          label="Confirm Password"
          name="ConfirmPassword"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item
          label="UserMail"
          name="UserMail"
          :rules="[{ required: true, message: 'Please input your mail!' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="MailCode"
          name="MailCode"
          :rules="[{ required: true, message: 'Please input your mailCode!' }]"
        >
          <a-input
            v-model:value="formState.username"
            maxlength="6"
            style="width: 80px"
          >
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <!-- <a-form-item>
          <a-form-item name="remember" no-style>
            <a-checkbox v-model:checked="formState.remember"
              >Remember me</a-checkbox
            >
          </a-form-item>
          <a class="login-form-forgot" href="">Forgot password</a>
        </a-form-item> -->

        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
          >
            register
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { reactive, computed } from "vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const open = ref(false);
    const showModal = () => {
      open.value = true;
    };
    const handleOk = (e: Object) => {
      console.log(e);
      open.value = false;
    };
    const formState = reactive({
      username: "",
      password: "",
      remember: true,
    });
    const onFinish = (values: Object) => {
      console.log("Success:", values);
    };
    const onFinishFailed = (errorInfo: Object) => {
      console.log("Failed:", errorInfo);
    };
    const disabled = computed(() => {
      return !(formState.username && formState.password);
    });
    return {
      showModal,
      handleOk,
      onFinish,
      onFinishFailed,
      disabled,
      formState,
      open,
    };
  },
});
</script>
